﻿@{

}

<style>
    .dialog-edit {
        width: 560px;
        height: 420px;
        margin: 0 auto;
        border-radius: 8px;
        /*text-align: center;*/
        background: #ffffff;
        z-index: 1000;
        top: 180px;
        left: 50%;
        position: fixed;
        margin-left: -260px;
        display: none;
    }

    .dialog-edit-mask {
        position: fixed;
        z-index: 999;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        filter: alpha(opacity=60);
        opacity: 0.6;
        overflow: hidden;
        background-color: #000;
        display: none;
    }

    .dialog-edit .title {
        margin-left: 10px;
        text-align: center;
    }
</style>
<div class="dialog-edit-mask"></div>
<div class="card dialog-edit">
    <div class="card-header">
        <button type="button" class="close" aria-label="关闭">
            <span aria-hidden="true">&times;</span>
        </button>
        <div class="card-title edit-dialog-title">编辑</div>
    </div>
    <div class="card-body">
        <form name="formEdit" action="Edit?handler=Server" method="post">
        </form>
    </div>
</div>

<script src="~/lib/jquery/dist/jquery.js"></script>
<script>
    // 请求前先设置好antitoken
    //$.ajaxSetup({
    //    beforeSend: function (xhr) {
    //        xhr.setRequestHeader("RequestVerificationToken",
    //            $('input:hidden[name="__RequestVerificationToken"]').val());
    //        console.log(xhr)
    //        //xhr.setRequestHeader("Content-Type", "application/json");
    //    }
    //});

    var successCallback, orgHeight, beforeSaveCallback;

    function closeDialog() {
        $(".dialog-edit").fadeOut();
        $(".dialog-edit-mask").hide();
    }

    // 保存
    function save(succCallback) {
        var form = $("form[name=formEdit]");
        var url = form.attr("action");
        var method = form.attr("method");
        var data = $.serializeObj("form[name=formEdit]");
        console.log(data);
        console.log("debug")
        //isFileRequest = true;
        $.ajax({
            url: url,
            data: JSON.stringify(data),
            type: method,
            processData: false,
            contentType: false,
            cache: false,
            success: res => {
                if (res.code === 0 || res.code === "Success") {
                    showMsg('.alert-info', res.message);
                    setTimeout(() => {
                        if (succCallback !== undefined) {
                            succCallback(res);
                        }
                    }, 1500); // 1.5秒后关闭
                } else {
                    showMsg('.alert-danger', res.message);
                }
                console.log(res);
            }
        });
    }

    function showMsg(selector, msg) {
        var ctr = $(selector);
        ctr.siblings(".alert").addClass("d-none");
        ctr.text(msg);
        ctr.removeClass("d-none");
        var dlg = $(".dialog-edit");
        dlg.height(orgHeight + ctr.height());
    }

    // 弹出框, beforeSaveCallback: 在保存之前调用，会将保存调用传出去，可自行判断是否需要执行保存（主要用于如上传成功后保存的操作, beforeSaveCallback(save);）
    // data: {items:[{name:'Name',cname:'名称',value,type:'text',tip:'请输入xxx',rows:'textarea的行数，默认3行',selData:[{name:,value:}]}],title:'编辑类模板分类',width:520,height:350,method:'POST',url:'/data',beforeSaveCallback:func,succCallback:func}
    function showEditDialog(data) {
        var items = data.items;
        var title = data.title;
        var height = data.height;
        var width = data.width;
        if (title) {
            $(".dialog-edit .edit-dialog-title").text(title);
        }
        var form = $('form[name=formEdit]');
        var content = getTip();
        $.each(items, (i, v) => {
            content += getEle(v, i > 0 ? 'mt-3' : '');
        });
        content += getBtn();
        form.html(content);
        form.attr('action', data.url);
        form.attr('method', data.method);
        successCallback = data.succCallback;
        beforeSaveCallback = data.beforeSaveCallback;
        $(".dialog-edit").width(width);
        $(".dialog-edit").height(height);
        $(".dialog-edit-mask").show();
        $(".dialog-edit").fadeIn();
        orgHeight = $(".dialog-edit").height();
        // 测试
        //var res = beforeSaveCallback();
        //console.log('beforeSaveCallback:' + res);
        regAction();
    }

    // 选择对应元素
    function dialog(selection) {
        return $("form[name=formEdit] " + selection);
    }

    // 提示信息
    function alertMsg(msg, isErr) {
        isErr = isErr || false;
        showMsg(isErr ? '.alert-danger' : '.alert-info', msg);
    }

    // 注册操作
    function regAction() {
        $(".save-result").on("click", e => {
            if (beforeSaveCallback) {
                beforeSaveCallback(() => {
                    save(res => {
                        closeDialog();
                        if (successCallback) {
                            successCallback();
                        }
                    });
                });
                return;
            }
            save(res => {
                closeDialog();
                if (successCallback) {
                    successCallback();
                }
            });
        });
        $(".close,.cancel-result").on('click', e => {
            closeDialog();
        });
    }

    function getTip() {
        return '<div class="alert alert-danger alert-dismissible d-none"></div><div class="alert alert-info alert-dismissible d-none"></div>';
    }

    function getEle(item, rowcls) {
        rowcls = rowcls || '';
        var input = '';
        var label = '<label class="col-md-3 text-lg-right">' + item.cname + '</label>';
        if (item.type === 'hidden') {
            label = '';
        }
        var tip = item.tip || '';
        if (item.type === 'select') {
            return getSels(item, rowcls);
        }
        if (item.type === 'textarea') {
            var rows = item.rows || 3;
            input = '<textarea class="col-md-9" multiple name="' + item.name + '" placeholder="' + tip + '" rows="' + rows + '" style="resize:none;">' + item.value + '</textarea>';
        } else if (item.type === 'file') {
            input = '<input type="hidden" value="' + item.value + '" name="' + item.name + '" />';
            input += '<input class="col-md-9" name="file' + item.name + '" type="' + item.type + '" value="' + item.value + '" placeholder="' + tip + '" />';
        } else {
            input = '<input class="col-md-9" name="' + item.name + '" type="' + item.type + '" value="' + item.value + '" placeholder="' + tip + '" />';
        }
        return '<div class="row mr-3 ' + rowcls + '">' + label + input + '</div>';
    }

    function getBtn() {
        return '<div class="row"> \
                <button type="button" class="offset-6 col-md-2 btn btn-success bg-primary mt-3 cancel-result">cancel</button> \
                <button type="button" class="offset-1 col-md-2 btn btn-success bg-primary mt-3 save-result">ok</button> \
            </div>';
    }

    function getSels(item, rowcls) {
        var label = '<label class="col-md-3 text-lg-right">' + item.cname + '</label>';
        var input = '<select name="' + item.name + '" class="col-md-9" placeholder="' + item.cname + '">';
        var data = item.selData;
        for (var i = 0; i < data.length; ++i) {
            var d = data[i];
            var value = d.value || d.Value;
            var name = d.name || d.Name;
            var selected = item.value === value ? "selected" : "";
            input += '<option value="' + value + '" ' + selected + '>' + name + '</option>';
        }
        input += '</select >';
        return '<div class="row mr-3 ' + rowcls + '">' + label + input + '</div>';
    }
</script>